<template>
  <!-- 轮播图大盒子 -->
  <div class="carousel-container">
    <!-- 轮播图盒子 继承父盒子宽度，自身高度400px -->
    <div class="carousel" @mouseenter="pauseAutoPlay" @mouseleave="resumeAutoPlay">
      <!-- 轮播图图片盒子 继承父盒子高度 -->
      <div class="slides" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
        <div v-for="(item, index) in slides" :key="index" class="slide">
          <img :src="item.image" :alt="item.alt" class="slide-image" />
          <div class="slide-content" v-if="item.title || item.description">
            <h3 v-if="item.title">{{ item.title }}</h3>
            <p v-if="item.description">{{ item.description }}</p>
          </div>
        </div>
      </div>

      <button class="nav-btn prev" @click="throttledPrevSlide">
        <i class="fas fa-chevron-left"> < </i>
      </button>
      <button class="nav-btn next" @click="throttledNextSlide">
        <i class="fas fa-chevron-right"> > </i>
      </button>

      <div class="indicators">
        <button
          v-for="(_, index) in slides"
          :key="index"
          @click="goToSlide(index)"
          :class="{ active: currentIndex === index }"
        ></button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import type { SlidesArray } from './type'
const props = defineProps({
  slides: {
    type: Array as () => SlidesArray,
    required: true,
    validator: (value: any) => {
      return value.every((slide: any) => slide.image && slide.alt)
    },
  },
  interval: {
    type: Number,
    default: 5000,
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
})
// 轮播图逻辑
// 当前索引
const currentIndex = ref(0)
// 轮播图自动播放定时器
let autoPlayTimer: any = null

// 节流函数
const throttle = (fn: any, t: number) => {
  let isStratt = true
  return function () {
    if (isStratt) {
      fn()
      isStratt = false
      setTimeout(() => {
        isStratt = true
      }, t)
    }
  }
}
// 下一张
const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % props.slides.length
}
const throttledNextSlide = throttle(nextSlide, 1000)
// 上一张
const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + props.slides.length) % props.slides.length
}
const throttledPrevSlide = throttle(prevSlide, 1000)
// 跳转到指定索引
const goToSlide = (index: any) => {
  currentIndex.value = index
}
// 开始自动播放
const startAutoPlay = () => {
  if (props.autoplay) {
    autoPlayTimer = setInterval(nextSlide, props.interval)
  }
}
// 鼠标移入暂停自动播放
const pauseAutoPlay = () => {
  if (autoPlayTimer) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
  }
}
// 鼠标离开继续自动播放
const resumeAutoPlay = () => {
  if (props.autoplay && !autoPlayTimer) {
    startAutoPlay()
  }
}

onMounted(() => {
  startAutoPlay()
})

onUnmounted(() => {
  pauseAutoPlay()
})
</script>

<style scoped>
.carousel-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.slides {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  position: relative;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
}

.slide-content h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.slide-content p {
  font-size: 1rem;
  margin-bottom: 0;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #333;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicators button.active {
  background: white;
  transform: scale(1.2);
}

.indicators button:hover:not(.active) {
  background: rgba(255, 255, 255, 0.8);
}
</style>
